<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn1">按钮20</button>
  <button id="btn2">按钮40</button>
  <button id="btn3">按钮60</button>
  <p>闭包把我搞大的</p>
  <script>
    // 使用闭包实现点击按钮改变页面上的文字大小
    var btns = document.querySelectorAll('button');
    var p = document.querySelector('p')
    for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        var fs = i == 0 ? '20px' : (i == 1 ? '40px' : '60px')
        p.style.fontSize = fs;
      }
    }

    // 定义一个函数 修改页面中字体大小 将设置的函数当做返回值传递
    // 点击按钮改变页面上的文字大小
    // var btn1 = document.getElementById('btn1');
    // var btn2 = document.getElementById('btn2');
    // var btn3 = document.getElementById('btn3');
    // function setFont(fontSize) {
    //   return function () {
    //     document.body.style.fontSize = fontSize + 'px';
    //   };
    // }
    // btn1.onclick = setFont(20);

    // btn2.onclick = setFont(40);

    // btn3.onclick = setFont(60);
  </script>
</body>

</html>